<template>
	<div id="devicelist" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>设备中心</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/devicelist' }">设备管理</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="batchExport">导出</button>
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>

			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span">设备/主板</span>
							<el-input size="medium" v-model="equipment_keyword" placeholder="请输入名称/编号" style="width: 160px;">
							</el-input>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">园区名称</span>
							<el-input size="medium" v-model="village_name" placeholder="请输入园区名称" style="width: 160px;"></el-input>
						</div>
						<div class="same-left-one">
							<span class="same-search-span same-search-fisrt">安装时间</span>
							<el-date-picker style="width:140px" v-model="start_time" type="date" size="medium"
								value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>
							<div class="same-interval">至</div>
							<el-date-picker style="width:140px" v-model="end_time" type="date" size="medium" value-format="yyyy-MM-dd"
								placeholder="结束时间"></el-date-picker>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button size="medium" type="primary" @click="serach()">搜索</el-button>
							<el-button size="medium" type="info" @click="reset()">重置</el-button>

						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 搜索更多 -->
				<div>
					<div class="same-search-left new-sear-height" ref="leftHeight">
						<!-- <div class="same-left-one">
							<span class="same-search-span">打水码编号</span>
							<el-input size="medium" v-model="fetch_water_number"  placeholder="请输入打水码编号" style="width: 160px;"></el-input>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">设备名称</span>
							<el-input size="medium" v-model="equipment_name"  placeholder="请输入设备名称" style="width: 160px;"></el-input>
						</div> -->
						<div class="same-left-one">
							<span class="same-search-span">联网状态</span>
							<el-select size="medium" v-model="state" placeholder="请选择" style="width: 140px;">
								<el-option v-for="item in stateoption" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">设备状态</span>
							<el-select size="medium" v-model="notice" placeholder="请选择" style="width: 140px;">
								<el-option v-for="item in noticeoption" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>

						<!-- <div class="same-left-one">
							<span class="same-search-span">所属园区</span>
							<el-select size="medium" v-model="province_id" placeholder="请选择省份" style="width: 140px;" @change="chooseProvince">
								<el-option v-for="item in Province" :key="item.province" :label="item.province_name" :value="item.province"></el-option>
							</el-select>
							<el-select size="medium" v-model="city_id" placeholder="请选择城市" style="width: 140px;" @change="chooseCity" >
								<el-option v-for="item in City" :key="item.city" :label="item.city_name" :value="item.city"></el-option>
							</el-select>
							<el-select size="medium" v-model="area_id" placeholder="请选择区县" style="width: 140px;" @change="chooseArea">
								<el-option v-for="item in Area" :key="item.area" :label="item.area_name" :value="item.area"></el-option>
							</el-select>
							<el-select size="medium" v-model="village_name" placeholder="请选择园区" style="width: 140px;"  @change="searchVillage">
								<el-option v-for="item in Village" :key="item.id" :label="item.village_name" :value="item.village_name"></el-option>
							</el-select>
						</div> -->
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button size="medium" type="primary" @click="serach()">搜索</el-button>
							<el-button size="medium" type="info" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right">
					</div>
				</div>

			</div>
		</div>

		<div class="same-table-box">
			<div class="tabel_header">
				<h4 class="same-title-box">我的设备
					<div class="same-search-total">
						在线
						<span style="color:#FF6565">{{ on_number }}</span>
						台，离线
						<span style="color:#FF6565">{{ off_number }}</span>
						台
						<span style="color:#FF6565">(注意: 消费数据仅统计本年数据)</span>
					</div>
				</h4>
				<div class="same-left-one">



					<el-popover ref="popover" placement="top-start" title="标题" width="200" trigger="hover">
						<el-row>
							<el-col :span="10">

							</el-col>
						</el-row>
					</el-popover>
					<el-button type="primary" size="mini" @click="addother()" icon="el-icon-circle-plus">新增</el-button>
					<!-- <button class="same-search-btns" type="button" @click="addother()">新增</button> -->
				</div>
			</div>
			<div class="table_box">

				<div class="common-table-outer">
					<el-table class="common-table" ref="multipleTable" v-loading="loading"
						header-cell-class-name="common-table-header-cell" :data="tableData"
						@selection-change="handleSelectionChange" stripe>

						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column header-align="center"  width="50" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
						<el-table-column header-align="center" align="left" label="设备名称">
							<template slot-scope="scope">
								<img class="networking_icon"
									:src="scope.row.networking_mode==1?'../../../static/images/mode_2G.png':'../../../static/images/mode_4G.png'">
								{{ scope.row.name }}
							</template>
						</el-table-column>

						<el-table-column align="center" prop="number" label="设备编号">
						</el-table-column>
						<el-table-column align="center" show-overflow-tooltip prop="equipment_number" label="主板编号">
						</el-table-column>
                        <el-table-column align="center" show-overflow-tooltip prop="equipment_name" label="主板名称">
                        </el-table-column>

						<el-table-column prop="village_name" show-overflow-tooltip align="center" label="园区名称">
						</el-table-column>

						<el-table-column align="center" width=100 label="联网状态">
							<template slot-scope="scope">
								<el-tag size="small" v-if="scope.row.status_warn==false" type="success">{{scope.row.status_desc}}
								</el-tag>
								<el-tag size="small" v-else type="danger">{{scope.row.status_desc}}</el-tag>
							</template>
						</el-table-column>

						<el-table-column align="center" label="设备状态">
							<template slot-scope="scope">
<!--								<div v-if="scope.row.eq_status == 1" class="other">正常</div>-->
								<div class="other_td" v-if="scope.row.eq_status_warn==true">
									<img class="img_ohter_show" src="../../../static/images/Noticeicon.png" />
									{{scope.row.eq_status_desc}}
								</div>
                <div v-else>
                  {{scope.row.eq_status_desc}}
                </div>
<!--								<div v-else-if="scope.row.eq_status == 3" class="other_td">-->
<!--									<img class="img_ohter_show" src="../../../static/images/Noticeicon.png" />-->
<!--									&nbsp;&nbsp;停水 <br />（低压）-->
<!--								</div>-->
<!--								<div v-else-if="scope.row.eq_status == 4" class="other_td">-->
<!--									<img class="img_ohter_show" src="../../../static/images/Noticeicon.png" />-->
<!--									&nbsp;&nbsp;排水<br />（高压）-->
<!--								</div>-->
<!--								<div v-else-if="scope.row.eq_status == 5" class="other_td">-->
<!--									<img class="img_ohter_show" src="../../../static/images/Noticeicon.png" />-->
<!--									&nbsp;&nbsp;机箱内温度低-->
<!--								</div>-->
<!--								<div v-else-if="scope.row.eq_status == 6" class="other_td">-->
<!--									<img class="img_ohter_show" src="../../../static/images/Noticeicon.png" />-->
<!--									&nbsp;&nbsp;机箱内温度高-->
<!--								</div>-->
<!--								<div v-else>-->
<!--									<img v-if="scope.row.status == 2" src="../../../static/images/Noticeicon.png" />-->
<!--									&nbsp;&nbsp;异常-->
<!--								</div>-->
							</template>
						</el-table-column>

						<el-table-column align="center" label="在线消费（元）">
							<template slot-scope="scope">
								{{ scope.row.wx_total|filterNumber }}
							</template>
						</el-table-column>

						<el-table-column align="center" label="线下消费（元）">
							<template slot-scope="scope">
								{{ scope.row.water_total|filterNumber }}
							</template>
						</el-table-column>

						<!-- <el-table-column align="center" prop="score_total" label="积分消费（个）">
						</el-table-column> -->



						<el-table-column align="center" show-overflow-tooltip prop="address" label="安装地址">
						</el-table-column>

						<el-table-column align="center" prop="install_time" label="安装时间">
						</el-table-column>

						<el-table-column width="200" align="center" label="操作">
							<template slot-scope="scope">
								<div class="device-list-btn-groups">

									<el-link class="custom-link" @click="more(scope.row.equipment_number, scope.row.id)">详情</el-link>

									<el-link class="custom-link" @click="openCode(scope.row.id, scope.row.base64_qr)">打水码
									</el-link>

									<el-link class="custom-link" @click="edit(scope.row.id)">编辑</el-link>
									<el-link v-if="scope.row.support_area_code_setting==2" class="custom-link custom-mt-5"
										@click="areaCode(scope.row.id)">区域码</el-link>
								</div>
							</template>
						</el-table-column>
						<!-- <el-table-column align="center" prop="address" label="状态">
							<template slot-scope="scope">
								<el-tag size="mini" type="success" v-if="scope.row.status == 1">已安装</el-tag>
								<el-tag size="mini" type="warning" v-else-if="scope.row.status == 0">未安装</el-tag>
								<span v-else>--</span>
							</template>
						</el-table-column> -->
						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>

					<div class="same-page-inShow device-list-page" v-if="tableData.length > 0 && isLoad">
						<el-button size="mini" type="primary" @click="openAllCode" v-loading.fullscreen.lock="fullscreenLoading">
							批量下载二维码</el-button>
						<!--//  分页-->
						<el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
							:page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
						</el-pagination>
					</div>
				</div>

				<!-- 二维码弹窗 -->
				<el-dialog custom-class="common-custom-dialog" title="下载二维码" :visible.sync="dialogVisible" width="460px" center
					top='17vh'>
					<div class="dialogBox" v-if="Qequipment_img">

						<el-image class="dialog-img" v-for="(item,index) in Qequipment_img" :key='index' :src="item"></el-image>
						<!-- <div class="QR-img-box">
							<img v-if="!is_make" :src="Qequipment_img?Qequipment_img:require('../../assets/images/makeError.png')"
								alt="" />
							<i v-else class="el-icon-loading" style="font-size:70px"></i>
						</div>
						<el-tooltip :disabled="is_make" class="hover-icon-box" effect="dark" content="点击可刷新二维码"
							placement="top-start">
							<i v-if="!is_make" class="el-icon-refresh-right hover-show" style="font-size:30px"
								@click="openCode(Qequipment_num,'',1)"></i>
							<i v-else style="font-size:30px"></i>
						</el-tooltip> -->
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button size="medium" @click="closeQrPop">取 消</el-button>
						<el-button size="medium" :disabled="no_dowload" style="background:#2C5586;color:#FFFFFF"
							@click="download(Qequipment_num,Qequipment_img)">下载二维码</el-button>
					</span>
				</el-dialog>

			</div>
		</div>
	</div>
</template>

<script>
	import { regionDataPlus } from 'element-china-area-data';
	export default {
		name: 'devicelist',
		data: function () {
			return {

				dialogVisible: false,
				pageNo: 1,
				pageSize: 15,
				pageSizesList: [15, 30, 40, 50],
				tableData: [], // 返回的结果集合
				totalDataNumber: 0, // 数据的总数,-----
				off_number: 0,//离线设备总数
				on_number: 0,//在线设备总数
				time: '',
				stateoption: [
					{
						value: 0,
						label: '全部状态'
					},
					{
						value: 1,
						label: '在线'
					},
					{
						value: 2,
						label: '离线'
					}
				],
				state: this.$route.query.stat_es == 2 ? 2 : '',
				noticeoption: [
					{
						value: '1',
						label: '正常'
					},
					{
						value: '2',
						label: '低水位'
					},
					{
						value: '3',
						label: '高水位'
					},
					{
						value: '4',
						label: '低压力'
					},
					{
						value: '5',
						label: '高压力'
					},
					{
						value: '6',
						label: '机箱内温度低'
					},
					{
						value: '7',
						label: '机箱内温度高'
					}
				],
				notice: '',
				options: regionDataPlus,
				address: [],
				start_time: '',
				end_time: '',
				equipment_name: '',
				equipment_number: '',
				equipment_keyword: '',
				province: '',
				city: '',
				area: '',
				isLoad: false,
				loading: true, //加载动画
				checkAll: false,
				checkedEq: [],
				userAgent: '',
				Province: [],
				City: [],
				Area: [],
				Village: [],
				province_id: '',
				city_id: '',
				area_id: '',
				village_id: '',
				village_name: '',
				fetch_water_number: '',
				Qequipment_num: '',//设备编号
				Qequipment_img: '',//设备二维码
				is_make: false,
				no_dowload: true,

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
				fullscreenLoading: false,//全屏指令遮罩loading
			};
		},


		// 初始化执行
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			this.getProvince();
			var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
			this.userAgent = userAgent;
			var that = this;
			if (locache.get('deviceListPage') != null) {
				that.pageNo = locache.get('deviceListPage');
			}
			if (locache.get('deviceListPageSize') != null) {
				that.pageSize = locache.get('deviceListPageSize');
			}
			var page = that.pageNo; // 当前页
			var pageSize = that.pageSize; // 每页条数
			that.equipment(page, pageSize); // 获取设备列表数据

		},
		inject: [
			'reload'
		],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			searchVillage() { },
			chooseProvince(val) {
				console.log(val);
				this.getCity(val);
				this.city_id = '';
				this.area_id = '';
				this.village_name = '';
			},
			chooseCity(val) {
				this.getArea(val);
				this.area_id = '';
				this.village_name = '';
			},
			chooseArea(val) {
				this.getVillage(val);
				this.village_name = '';
			},
			//三级联动-省
			getProvince() {
				this.$post({
					url: 'Partner/Village/getEqProvince',
					data: {},
					success: data => {
						this.Province = data.data;
					}
				});
			}, //三级联动-市
			getCity(id) {
				this.$post({
					url: 'Partner/Village/getEqCity',
					data: {
						id: id
					},
					success: data => {
						this.City = data.data;
					}
				});
			}, //三级联动-区/县
			getArea(id) {
				this.$post({
					url: 'Partner/Village/getEqArea',
					data: {
						id: id
					},
					success: data => {
						this.Area = data.data;
					}
				});
			}, //园区列表
			getVillage(id) {
				this.$post({
					url: 'Partner/Village/getAllVillage',
					data: {
						province: this.province_id,
						city: this.city_id,
						area: this.area_id,
						village_name: ''
					},
					success: data => {
						this.Village = data.data;
					}
				});
			},
			handleChange(value) { },
			//编辑
			edit: function (id) {
				this.$router.push({ path: '/edit', query: { id: id } });
			},
			//区域码
			areaCode(id) {
				this.$router.push({ path: '/areacode', query: { equipment_id: id } });
			},
			//更多信息
			more: function (val, id) {
				this.$router.push({ path: '/moreinformation', query: { equipment_number: val, id: id } });
			},

			// 每页
			handleSizeChange(val) {
				var that = this;
				that.pageNo = 1;
				locache.set('deviceListPageSize', val);
				that.pageSize = val; // 当前每页显示条数
				that.equipment(that.pageNo, val); // 获取设备列表数据
			},
			// 分页
			handleCurrentChange(val) {
				var that = this;
				var pageSize = that.pageSize; // 每页条数
				that.pageNo = val;
				locache.set('deviceListPage', val);
				that.equipment(val, pageSize); // 获取设备列表数据
			},
			// 获取设备列表数据
			equipment: function (page, pageSize) {
				this.loading = true; //打开loading动画
				this.isLoad = false;
				var that = this;
				// ajax请求
				that.$post({
					url: 'Partner/Equipment/getList',
					data: {
						page: page,
						pageSize: pageSize,
						start_time: that.start_time ? that.start_time : '',
						end_time: that.end_time ? that.end_time : '',
						equipment_name: that.equipment_name,
						equipment_number: that.equipment_number,
						equipment_keyword: that.equipment_keyword,
						village_name: that.village_name,
						status: that.state,
						notice: that.notice,
						province: that.province_id,
						city: that.city_id,
						area: that.area_id,
						address: that.village_name,
						fetch_water_number: that.fetch_water_number
					},
					success: data => {
						this.loading = false; //关闭动画
						this.isLoad = true;
						if (data.code == 1000) {
							that.tableData = []; // 清空数据
							$.each(data.data.eq, function () {
								this.checked = false;
								that.tableData.push(this);
							});
							that.totalDataNumber = Number(data.data.count); // 总的数据
							that.off_number = data.data.off_number; //总离线设备数
							that.on_number = data.data.on_number; //总在线设备数
						} else {
							that.tableData = []; // 清空数据
						}
					}
				});
			},

			//重置搜索
			reset() {
				this.time = '';
				this.start_time = '';
				this.end_time = '';
				this.equipment_name = '';
				this.equipment_number = '';
				this.equipment_keyword = '';
				this.state = '';
				this.notice = '';
				this.address = [];
				this.village_name = '';
				this.fetch_water_number = '';
				this.province = '';
				this.city = '';
				this.area = '';
				this.province_id = '';
				this.city_id = '';
				this.area_id = '';
				this.pageNo = 1;
				this.equipment(this.pageNo, this.pageSize);
			},
			// 搜索事件
			serach: function () {
				var that = this;
				that.province = that.address[0];
				that.city = that.address[1];
				that.area = that.address[2];
				that.pageNo = 1; // 当前页
				locache.set('deviceListPage', that.pageNo);
				that.equipment(that.pageNo, that.pageSize); // 获取设备列表数据
			},
			overShow() {
				console.log('贤惠型')
			},
			//关闭弹窗
			closeQrPop() {
				this.dialogVisible = false;
				setTimeout(() => {
					this.Qequipment_img = '';
					this.Qequipment_num = '';
				}, 300)
			},
			//点击弹出二维码

			openCode: function (qrcode, base64_qr, types = 2) {
				var that = this;
				this.Qequipment_img = '';
				that.dialogVisible = true;
				that.Qequipment_num = qrcode;
				that.is_make = true;
				that.no_dowload = true;
				that.$post({
					url: 'Common/Equipment/getQrcode',
					data: { equipment_control_id: qrcode },
					success: res => {
						if (res.code == 1000) {
							that.Qequipment_img = res.data.qrcode;
							that.no_dowload = false;
						} else {
							that.Qequipment_img = '';
							that.no_dowload = true;
							that.$message.error(res.message);
						}
						setTimeout(() => {
							that.is_make = false;
						}, 300)

					}
				});
			},


			//批量下载二维码
			batchDownloadQrcode(ids) {
				this.$post({
					url: 'Common/Equipment/getQrcode',
					data: { equipment_control_id: ids },
					success: res => {
						this.fullscreenLoading = false;
						if (res.code > 0) {
							let pics = res.data.qrcode;
							for (let i = 0; i < pics.length; i++) {
								this.downloadIamge(pics[i],`二维码${i+1}`);
							}
						} else {
							this.$message.error(res.message);
						}
					}, error: e => {
						this.fullscreenLoading = false;
						this.$message.error("网络错误");
					}
				})
			},
			downloadIamge(imgsrc, name) {//下载图片地址和图片名
				let image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute("crossOrigin", "anonymous");
				image.onload = function () {
					let canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					let context = canvas.getContext("2d");
					context.drawImage(image, 0, 0, image.width, image.height);
					let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
					let a = document.createElement("a"); // 生成一个a元素
					let event = new MouseEvent("click"); // 创建一个单击事件
					a.download = name || "photo"; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},



			handleSelectionChange(e) {
				// console.log(e, "handleSelectionChange");
				this.checkedEq = e;
				// let checkedEq = [];
				// if (e.length > 0) {
				// 	e.forEach(item => {
				// 		var code = { qrcode: item.equipment_number, base64_qr: item.base64_qr };
				// 		checkedEq.push(code);
				// 	})
				// 	this.checkedEq = checkedEq;
				// } else {
				// 	this.checkedEq = [];
				// }
			},

			//全选
			handleCheckAllChange: function (val) {
				var that = this;
				that.checkedEq = [];
				if (val == true) {
					that.tableData.forEach(function (item) {
						if (item.base64_qr != '' && item.base64_qr != null) {
							item.checked = true;
							var code = { qrcode: item.equipment_number, base64_qr: item.base64_qr };
							that.checkedEq.push(code);
						}
					});
				} else {
					that.tableData.forEach(function (item) {
						item.checked = false;
					});
					that.checkedEq = [];
				}
			},
			//单选
			handleCheckedChange2: function (i) {
				var that = this;
				that.checkedEq = [];
				console.log(i, "i")
				if (i == true) {
					that.tableData.forEach(function (item) {
						if (item.base64_qr != '' && item.base64_qr != null) {
							item.checked = true;
							var code = { qrcode: item.equipment_number, base64_qr: item.base64_qr };
							that.checkedEq.push(code);
						}
					});
				} else {
					that.tableData.forEach(function (item) {
						item.checked = false;
					});
					that.checkedEq = [];
				}
				console.log('checkedEq1', that.checkedEq);
			},
			//单选
			handleCheckedChange: function (i) {
				// console.log('数据',i)
				var that = this;
				// console.log('二维码有问题,你看->->',i.base64_qr)
				if (i.checked == true && i.base64_qr != '' && i.base64_qr != null) {
					var code = { qrcode: i.equipment_number, base64_qr: i.base64_qr };
					console.log('code', code)
					that.checkedEq.push(code);
				} else {
					var result = [];
					that.checkedEq.forEach(function (item) {
						if (i.equipment_number != item.qrcode && item.base64_qr != '') {
							result.push(item);
						}
					});
					that.checkedEq = result;
				}
				var k = 0; //
				that.tableData.forEach(function (item) {
					if (item.checked == false) {
						k++;
					}
				});

				if (k == 0) {
					that.checkAll = true;
				} else {
					that.checkAll = false;
				}
			},
			addother: function () {
				locache.set('deviceListPage', null);
				locache.set('deviceListPageSize', null);
				this.$router.push({ path: '/deviceadd' });
			},
			batchExport: function () {
				// this.$message.warning('正在努力开发中，请稍候');
				var that = this;
				var start_time = '';
				var end_time = '';
				if (that.time != null) {
					start_time = that.time[0]; //开始时间
					end_time = that.time[1]; //结束时间
				}
				that.$post({
					url: 'Partner/Equipment/export',
					data: {
						start_time: that.start_time ? that.start_time : '',
						end_time: that.end_time ? that.end_time : '',
						equipment_name: that.equipment_name,
						equipment_number: that.equipment_number,
						equipment_keyword: that.equipment_keyword,
						village_name: that.village_name,
						status: that.state,
						notice: that.notice,
						province: that.province_id,
						city: that.city_id,
						area: that.area_id,
						address: that.village_name
					},
					success: data => {
						if (data.code < 0) {
							this.$message({
								showClose: true,
								message: data.data.message,
								center: true
							});
						}
						var $form = $('<form method="GET"></form>');
						$form.attr('action', data.data);
						$form.appendTo($('body'));
						$form.submit();
					}
				});
			},
			//多图下载
			openAllCode: function () {
				if (this.checkedEq.length == 0) {
					this.$message.warning('请至少勾选一个设备，才能批量下载二维码');
					return false;
				}
				this.fullscreenLoading = true;
				let ids = [];
				this.checkedEq.forEach(item => {
					ids.push(item.id);
				});
				this.batchDownloadQrcode(ids);
				// that.checkedEq.forEach(function (item) {
				// 	that.sleep(500);
				// 	that.download(item.qrcode, item.base64_qr);
				// });
			},
			//单张图片
			download: function (src, base64_qr) {
				if (base64_qr != '' && base64_qr != null) {
					if (base64_qr.length > 0) {
						for (let i = 0; i < base64_qr.length; i++) {
							let link = document.createElement('a');
							link.style.display = 'none';
							link.href = base64_qr[i];
							link.setAttribute('download', src);
							document.body.appendChild(link);
							link.click();
						}
					} else {
						let link = document.createElement('a');
						link.style.display = 'none';
						link.href = base64_qr;
						link.setAttribute('download', src);
						document.body.appendChild(link);
						link.click();
					}

				}

				//

				//     			var $a = document.createElement('a');
				//     			//var imgSrc = $(".down_btn_a").siblings("img").attr("src");
				//     			console.log($a)
				//				$a.setAttribute("download",src);
				//				$a.setAttribute("href",src);
				//				$a.click();
				//				console.log($a)

				//     			console.log($("#pic"));
				//     			$("#pic").attr("download",src)
				//     			$("#pic").attr("href",src)
				//     			$("#pic")[0].click();

				//     			var $a = document.createElement('a');
				//			    $a.setAttribute("href", src);
				//			    $a.setAttribute("download", "");
				//
				//			    var evObj = document.createEvent('MouseEvents');
				//			    evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
				//			    $a.dispatchEvent(evObj);
			},
			//图片下载间隔时间
			sleep: function (d) {
				for (var t = Date.now(); Date.now() - t <= d;);
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		},


		activated() {
			if (this.$route.meta.isUpdate) {
				this.tableData = [];
				this.equipment(this.pageNo, this.pageSize)
				this.$route.meta.isUpdate = false;
			}
		},

		beforeRouteEnter(to, from, next) {
			let updates = ["/edit", "/deviceadd"]
			if (updates.includes(from.path)) {
				to.meta.isUpdate = true;
			}
			next();
		},
		beforeRouteLeave(to, from, next) {
			let updates = ["/edit", "/deviceadd", "/moreinformation", "/areacode"];
			if (!updates.includes(to.path)) {
				from.meta.keepAlive = false;
			} else {
				from.meta.keepAlive = true;
			}
			next();
		}

	};
</script>

<style>
	.el-row {
		margin-bottom: 20px;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	#devicelist {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}

	#devicelist .tabel_header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}



	#devicelist .devicewrap {
		padding: 0 40px;
	}

	#devicelist .searchform {
		width: 80%;
		font-size: 16px;
	}

	#devicelist .searchwrap {
		display: flex;
		align-items: center;
		/*justify-content: space-between;*/
		margin: 10px 0;
	}

	#devicelist .searchwrap .searchitem {
		display: flex;
		align-items: center;
	}

	#devicelist .searchwrap .searchitem button {
		margin-left: 15%;
	}

	#devicelist .searchform input {
		height: 30px;
	}

	#devicelist .searchform .el-range-editor.el-input__inner {
		height: 30px;
		width: 250px;
	}

	#devicelist .searchform .el-range-editor.el-input__inner input {
		height: auto;
	}

	#devicelist .searchform .inputitem {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		padding: 0 15px;
	}

	#devicelist .searchitem .el-date-editor .el-range-input {
		width: 35%;
	}

	#devicelist .searchform .selected .el-input {
		width: 120px;
	}

	#devicelist .searchform button {
		background-color: #2c5586;
		color: #fff;
		border: none;
		border-radius: 4px;
		width: 80px;
		height: 30px;
		cursor: pointer;
		font-weight: bold;
	}

	#devicelist .rightbtn button {
		background-color: #2c5586;
		color: #fff;
		border: none;
		border-radius: 4px;
		width: 120px;
		height: 30px;
		cursor: pointer;
		font-weight: bold;
	}

	#devicelist .rightbtn .export {
		position: relative;
		margin-bottom: 5px;
		height: 105px;
	}

	#devicelist .rightbtn .export button {
		height: 30px;
		border: 1px solid #bf73ac;
		background-color: #fff;
		color: #bf73ac;
		border-radius: 4px;
		cursor: pointer;
		font-weight: bold;
		margin: 10px 0;
	}

	#devicelist .rightbtn .export .addother {
		position: absolute;
		bottom: 0px;
		right: 0px;
		background-color: #2c5586;
		color: #fff;
		border: none;
		border-radius: 4px;
		width: 80px;
		height: 30px;
		cursor: pointer;
		font-weight: bold;
	}

	#devicelist .topsearchwrap {
		display: flex;
		justify-content: space-between;
	}

	.paginShow {
		margin-top: 40px;
		display: flex;
		justify-content: flex-end;
	}

	/*暂无数据*/
	#devicelist .noneshow {
		padding: 20px 0px;
		background: #fff;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.cancelButton {
		width: 100px;
		height: 40px;
		background-color: #b3b2b2;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
	}

	.confirmButton {
		width: 100px;
		height: 40px;
		background-color: #2c5586;
		border: none;
		color: #ffffff;
		font-size: 14px;
		font-weight: bold;
	}

	.cancelButton:hover,
	.cancelButton:focus {
		background-color: #b3b2b2;
		border: none;
		color: #fff;
	}

	.confirmButton:hover,
	.confirmButton:focus {
		background-color: #2c5586;
		color: #ffffff;
	}

	#devicelist table>tr>th:first-child>label>span {
		border-right: none;
	}

	#devicelist table>tr>th:first-child span {
		width: 14px;
		height: 14px;
		line-height: 14px;
	}

	#devicelist .dialogBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#devicelist .QR-img-box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 242px;
		margin-bottom: 10px;
	}

	#devicelist .QR-img-box img {
		max-width: 300px;
	}

	#devicelist .hover-icon-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#devicelist .hover-show {
		cursor: pointer;

	}

	#devicelist .networking {
		background: #2c5586;
		color: rgb(255, 255, 255);
		font-size: 5px;
		padding: 0 3px;
		border-radius: 5px;
		margin-right: 2px;
	}

	#devicelist .networking_icon {
		width: 15px;
	}

	#devicelist .other_td {
		color: #FF6565;
	}
</style>
<style scoped>
	.device-list-btn-groups button:nth-of-type(3) {
		margin-top: 10px;
		margin-left: 0;
	}

	.dialog-img {
		width: 180px;
	}

	.device-list-page {
		display: flex;
		align-items: center;
		margin-top: 35px;
		justify-content: space-between;
	}
</style>
